<script setup lang="ts">
import { ref } from 'vue';
import type { UploadChangeParam, UploadFile } from 'ant-design-vue';
import type { HomeworkCardType } from '@/types/micro-scene';
import { PlusOutlined, UploadOutlined } from '@ant-design/icons-vue';
import { validateNull } from '@/utils/validate';
import { message } from 'ant-design-vue';
const props = defineProps<{
  showModal: boolean
}>();

const emit = defineEmits(['update:showModal', 'uploadHomework'])

const imgFileList = ref<any[]>([]); // 添加作品封面列表状态
const homeworkFileList = ref<any[]>([]); // 添加作业列表状态

// 弹窗数据
const formData = ref<HomeworkCardType>({
  opusId: '',
  opusTitle: '',
  homeworkLabel: [],
  introduction: '',
  homeworkImage: '',
  homeworkUrl: '',
});

const handleModalOk = () => {
  // 校验字段
  if (!validateNull(formData.value.opusTitle) && !validateNull(formData.value.introduction) && !validateNull(formData.value.homeworkLabel) && !validateNull(imgFileList.value) && !validateNull(homeworkFileList.value)) {
    emit('uploadHomework', formData.value, imgFileList.value, homeworkFileList.value);
    emit('update:showModal', false);
    // 清空
    formData.value = {
      opusId: '',
      opusTitle: '',
      homeworkLabel: [],
      introduction: '',
      homeworkImage: '',
      homeworkUrl: '',
    };
    imgFileList.value = [];
    homeworkFileList.value = [];
    message.success('上传成功');
  }
  else {
    message.error('请填写完整信息');
  }
};

const handleHomeworkImageChange = (info: UploadChangeParam) => {
  imgFileList.value = info.fileList;
  const fileUrl = URL.createObjectURL(imgFileList.value[0].originFileObj);
  formData.value.homeworkImage = fileUrl;
};

const handleModalCancel = () => {
  emit('update:showModal', false);
};

const beforeImgUpload = (file: UploadFile) => {
  return false; // 返回 false 阻止上传
};

const beforeHomeworkUpload = (file: UploadFile) => {
  return false; // 返回 false 阻止上传
};

const handleHomeworkFileChange = (info: UploadChangeParam) => {
  homeworkFileList.value = info.fileList;
};
</script>

<template>
  <!-- 上传作品弹窗 -->
  <a-modal
    :open="showModal"
    title="上传作业"
    ok-text="确定"
    cancel-text="取消"
    :width="600"
    @ok="handleModalOk"
    @cancel="handleModalCancel"
  >
    <a-form layout="vertical">
      <div class="flex">
        <div class="mt-4">
          <a-upload
            accept="image/*"
            list-type="picture-card"
            action=""
            :before-upload="beforeImgUpload"
            :show-upload-list="{
              showPreviewIcon: false,
              showRemoveIcon: true,
            }"
            :max-count="1"
            :file-list="imgFileList"
            @change="handleHomeworkImageChange"
          >
            <template v-if="imgFileList.length < 1">
              <div style="width: 100px; height: 100px; background-color: #f0f0f0;">
                <PlusOutlined style="margin-top: 30px;" />
                <div style="margin-top: 0;">
                  作品封面
                </div>
              </div>
            </template>
          </a-upload>
        </div>
        <div class="flex-1 ml-4">
          <a-form-item
            label="作业标题"
            name="homeworkTitle"
            :rules="[{ required: false, message: '请输入作业标题' }]"
          >
            <a-input v-model:value="formData.opusTitle" placeholder="请输入作业标题" />
          </a-form-item>
          <a-form-item
            label="作业标签"
            name="homeworkLabel"
            :rules="[{ required: false, message: '请输入作业标签' }]"
          >
            <a-select
              v-model:value="formData.homeworkLabel"
              placeholder="请选择作业标签"
              mode="tags"
            />
          </a-form-item>
        </div>
      </div>

      <a-form-item
        name="homeworkDescription"
        label="作业介绍"
      >
        <a-textarea v-model:value="formData.introduction" placeholder="请输入作业介绍" auto-size />
      </a-form-item>

      <a-form-item
        name="homeworkFile"
        label="作业文件"
      >
        <a-upload
          accept="*"
          action=""
          :before-upload="beforeHomeworkUpload"
          :file-list="homeworkFileList"
          :max-count="1"
          @change="handleHomeworkFileChange"
        >
          <a-button>
            <template #icon>
              <UploadOutlined />
            </template>
            上传作业
          </a-button>
        </a-upload>
      </a-form-item>
    </a-form>
  </a-modal>
</template>
